<template>
  <div class="integral-summary-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
        @onExport="onExport"
      >
      </c-table-search-form>
      <!-- 表格部分 -->
      <c-table
        showPagination
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
      </c-table>
      <!-- 新增/编辑弹窗 -->
      <a-modal
        width="30%"
        title="温馨提示"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="onFormSubmit"
        @cancel="onFormCancel"
        :destroyOnClose="true"
        center
      >
        <c-form-model
          checkStrictly
          :datas="formType == 'refuse' ? formRefuseData : formDeliverData"
          v-model="form"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="onFormCancel">取消</a-button>
          <a-button
            type="primary"
            :loading="confirmLoading"
            @click="onFormSubmit"
            >确定</a-button
          >
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "IntegralSummary",
  components: {},
  data() {
    return {
      visible: false,
      form: {},
      formType: "refuse",
      confirmLoading: false,
      tableSearchForm: {
        searchKey: "",
        orderStatus: "0"
      },
      tableSearchFormData: [
      
        {
          label: "请输入/手机号码/用户姓名",
          prop: "searchKey",
          type: "search"
        },
        {
          prop: "exportBtn",
          type: "exportBtn"
        }
      ],
      tableColumns: [
        {
          title: "买手姓名",
          dataIndex: "",
          align: "center"
        },
        {
          title: "手机号码",
          dataIndex: "",
          align: "center"
        },
        {
          title: "当前剩余积分",
          dataIndex: "",
          align: "center"
        },
        {
          title: "即将获得积分",
          dataIndex: "",
          align: "center"
        },
        {
          title: "已使用积分",
          dataIndex: "",
          align: "center"
        },
        {
          title: "已兑换次数",
          dataIndex: "",
          align: "center"
        }
      ],
      formRefuseData: [
        {
          label: "拒绝理由",
          prop: "refuseReason",
          type: "textarea"
        }
      ],
      formDeliverData: [
        {
          label: "物流公司",
          prop: "logisticsCompany"
        },
        {
          label: "物流单号",
          prop: "trackingNumber"
        },
        {
          label: "备注",
          prop: "remark",
          type: "textarea"
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onSearch() {
      // console.log(12);
    },
    onExport() {
      // console.log(122);
    },
    onPageOnlod() {
      this.loading = true;
      getUserList({
        auditState: this.companyStatus ? Number(this.companyStatus) : "",
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onDeliver() {
      this.formType = "deliver";
      this.visible = true;
    },
    onRefuse() {
      this.formType = "refuse";
      this.visible = true;
    },
    onFormCancel() {
      this.visible = false;
    },
    onFormSubmit() {}
  }
};
</script>

<style lang="less" scoped>
</style>
